<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>库存管理</cite></a>
        <a><cite>库存变动记录查询</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            库存变动记录查询
        </div>
        <div class="layui-card-body">
            <div class="layui-row" style="margin-bottom: 10px;">
                <form class="layui-form" lay-filter="formSearch">
                    <div class="layui-col-md3">
                        <div class="layui-inline">
                            <label class="layui-form-label"
                                style="width: 75px; text-align: left; padding-left: 0;">操作员:</label>
                            <div class="layui-input-inline" style="width: 200px; ">
                                <select name="empuuid" id="emp_list" lay-verify="">
                                    <option value="">---请选择操作员---</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-inline" id="time">
                            <label class="layui-form-label"
                                style="width: 75px; text-align: left; padding-left: 0;">操作日期:</label>
                            <div class="layui-input-inline" style="width: 200px; ">
                                <input type="text" class="layui-input" autocomplete="off" name="opertime"
                                    id="start" placeholder="开始日期">
                            </div>
                            到
                            <div class="layui-input-inline" style="width: 200px; ">
                                <input type="text" class="layui-input" autocomplete="off" name="topertime"
                                    id="end" placeholder="结束日期">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-inline">
                            <label class="layui-form-label"
                                style="width: 75px; text-align: left; padding-left: 0;">仓库:</label>
                            <div class="layui-input-inline" style="width: 200px; ">
                                <select name="storeuuid" id="store_list" lay-verify="">
                                    <option value="">---请选择仓库---</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-inline">
                            <label class="layui-form-label"
                                style="width: 75px; text-align: left; padding-left: 0;">商品:</label>
                            <div class="layui-input-inline" style="width: 200px; ">
                                <select name="goodsuuid" id="goods_list" lay-verify="">
                                    <option value="">---请选择商品---</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-inline">
                            <label class="layui-form-label"
                                style="width: 75px; text-align: left; padding-left: 0;">类型:</label>
                            <div class="layui-input-inline" style="width: 200px; ">
                                <select name="type" id="goods" lay-verify="">
                                    <option value="">全部</option>
                                    <option value="1">入库</option>
                                    <option value="0">出库</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="layui-btn" id="search-btn">搜索</button>
                    <button type="reset" class="layui-btn" id="reset-btn">重置</button>
                </form>
            </div>
            <!-- 表格 -->
            <table id="change-list-table-parseData" lay-filter="change-list-table-parseData"></table>
        </div>
    </div>
</div>



<script>
    layui.use(['admin', 'table', 'form', 'laydate'], function () {
        var admin = layui.admin
            , table = layui.table
            , form = layui.form
            , baseUrl = layui.setter.baseUrl
            , $ = layui.$
            , laydate = layui.laydate;

        // 查询操作员
        admin.req({
            url: baseUrl + 'storeoper/emp_list',
            success: function (res) {
                $.each(res.data, function (i, item) {
                    $('#emp_list').append(`<option value="${item.uuid}">${item.name}</option>`)
                })
                form.render(null, 'formSearch');
            }
        })
        // 查询仓库列表
        admin.req({
            url: baseUrl + 'storeoper/store_list',
            success: function (res) {
                $.each(res.data.rows, function (i, item) {
                    $('#store_list').append(`<option value="${item.uuid}">${item.name}</option>`)
                })
                form.render(null, 'formSearch');
            }
        })
        //查询商品列表
        admin.req({
            url: baseUrl + 'storeoper/goods_list',
            success: function (res) {
                $.each(res.data.rows, function (i, item) {
                    $('#goods_list').append(`<option value="${item.uuid}">${item.name}</option>`)
                })
                form.render(null, 'formSearch');
            }
        })
        // 日期渲染
        laydate.render({
            elem: '#time',
            range: ['#start', '#end']
        });


        // 表格渲染        
        form.render(null, 'formSearch')
        var tableIns = table.render({
            elem: '#change-list-table-parseData'
            // 请求地址
            , url: baseUrl + 'storeoper'
            , toolbar: true
            , title: '商品表'
            , cellMinWidth: 120
            // 是否开启加载loding
            , loading: true
            // 数据渲染规定
            , cols: [[
                { field: 'uuid', title: '操作记录编号', width: 110 }
                , { field: 'empName', title: '操作员工' }
                , { field: 'opertime', title: '操作日期' , templet: '<div>{{d.opertime ? d.opertime.substring(0,10) : ""}}</div>'}
                , { field: 'storeName', title: '仓库' }
                , { field: 'goodsName', title: '商品' }
                , { field: 'num', title: '数量' }
                , { field: 'type', title: '类型' , templet: '<div>{{d.type == 1 ? "入库" : "出库"}}</div>'}

            ]]
            // 开启分页
            , page: true
            , request: {
                pageName: 'page',
                limitName: 'rows'
            }
            , response: {
                // statusName: 'code',
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            }
        });

        // 搜索功能
        $('#search-btn').click(function () {
            var data = form.val('formSearch');
            tableIns.reload({
                where: data
            })
        })
    });

    // 关闭弹框
    function closeLayer() {
        layer.closeAll();
    }

</script>

<style>
    .layui-col-md3,
    .layui-col-md6,
    #reset-btn,
    #search-btn {
        margin-top: 10px;
    }
</style>